<template>
  <section>
    <el-button size="mini" type="primary" @click="showQa=true">+</el-button>
    <el-table :data="detection.detectionItems">
      <el-table-column type="index" />
      <el-table-column label="项目名">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.title"/>
          <span v-else>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" :type="scope.row.edit?'':'primary'" @click="itemEdit(scope.row)">{{scope.row.edit?'取消':'编辑'}}</el-button>
          <el-button v-if="scope.row.edit" size="mini" type="success" @click="saveBtn(scope.row)">保存</el-button>
          <el-button v-else size="mini" type="danger" @click="delBtn(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="showQa" v-if="showQa" title="导入问卷实例" append-to-body>
      <choice-instance v-on:submitItem="confirmNewItem"/>
    </el-dialog>
  </section>
</template>

<script>
  import choiceInstance from './choiceInstance'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'
  export default {
    name: "detectionItem",
    props:['detection'],
    components:{choiceInstance},
    data(){
      return{
        showQa:false
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    created(){
      console.log('看下检测项-------',this.detection)
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      addBtn(){
        this.showQa=true
      },
      confirmNewItem(e){
        console.log('选中的实例列表，创建------',e)
        let tmp=[]
        e.forEach(i=>{
          let index=this.detection.detectionItems.findIndex(d=>d.instanceId === i.id)
          if(index<0){
            let data={instanceId:i.id,title:i.title,departmentId:this.department.id}
            tmp.push(data)
          }
        })
        console.log('看看最后的数组-----',tmp)
        if(tmp.length<=0){
          this.$message({type:'info',message:'可导入实例为空，请确认！'})
          return
        }
        if(this.detection.id ) this.createItem(tmp)
        else {
          console.log('还未创建检测',tmp)
          this.showQa=false
          this.detection.detectionItems=this.detection.detectionItems.concat(tmp)
        }
        // detectionId:this.detection.id
      },
      createItem(array){
        this.fetch({name:"createDetectionItem",data:{...array[0],detectionId:this.detection.id}})
          .then(res=>{
            array.splice(0,1)
            this.detection.detectionItems.push(res)
            if(array.length>0) this.createItem(array)
            else{
              console.log('在检测里创建item完毕',res)
              this.showQa=false
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      saveBtn(row){
        if(!this.detection.id){
          row.edit=false
          return
        }
        this.fetch({name:"updateDetectionItem",data:{id:row.id,title:row.title}})
          .then(res=>{
            console.log('更新成功')
            row.edit=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delBtn(scope){
        this.$confirm('确认删除？')
          .then(()=> {
            if(!this.detection.id) this.detection.detectionItems.splice(scope.$index,1)
            else
            this.fetch({name:"delDetectionItem",data:{id:scope.row.id}})
              .then(res=>{
                console.log('删除检测项成功----------')
                this.detection.detectionItems.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      itemEdit(row){
        if(!row.edit){
          Vue.set(row,'edit',true)
          return
        }
        row.edit=!row.edit
      }
    }
  }
</script>

<style scoped>

</style>
